<template>
	<view class="couponCenter">
		<view class="couponCenter-top">
		</view>
		<view class="couponCenter-bon">
			<view class="couponCenter-list">
					<view class="couponCenter-l">
							20
					</view>
					<view class="couponCenter-r">
						<view class="couponCenter-r-t">
							<view class="couponCenter-r-t-l">
								<text class="couponCenter-r-text">满200元可用</text>
								<view class="couponCenter-r-tview">仅限用于XX加油站使用</view>
						</view>
						<button class="couponCenter-r-but" @click="handleReceive" :style="{backgroundColor:color}">领取</button>
						</view>
						<view class="couponCenter-r-b">
							2020.04.11——2023.05.11
						</view>
					</view>
			</view>
			
			<view class="couponCenter-list">
					<view class="couponCenter-l">
							20
					</view>
					<view class="couponCenter-r">
						<view class="couponCenter-r-t">
							<view class="couponCenter-r-t-l">
								<text class="couponCenter-r-text">满200元可用</text>
								<view class="couponCenter-r-tview">仅限用于XX加油站使用</view>
						</view>
						<button class="couponCenter-r-but" @click="handleReceive" :style="{backgroundColor:color}">领取</button>
						</view>
						<view class="couponCenter-r-b">
							2020.04.11——2023.05.11
						</view>
					</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				color:'#FFF3EB'
			}
		},
		methods: {
			handleReceive(){
				this.color="#d5d5d5"
			}
			
		}
	}
</script>

<style>
	.couponCenter{
		position: relative;
		}
	.couponCenter-top{
		 width: 100%;
		 display: flex;
		 flex-wrap: wrap;
		 justify-content: space-between;
		 background-color: #297BF6;
		 height: 300rpx;
		 color: aliceblue;
	}

	.couponCenter-bon{
		position: absolute;
		width: 93%;
		top:40rpx;
		left: 30rpx;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 25rpx;
	}
	.couponCenter-list{
		margin: 20rpx;
		border-radius: 25rpx;
		background-color: #FF7738;
		height: 200rpx;
		color: #fff;
		padding: 20rpx 30rpx;
	}
	.couponCenter-l{
		float: left;
		font-size: 60rpx;
		line-height: 200rpx;
		margin-left: 40rpx;
	}
	
	.couponCenter-r{
		float: right;
	
	}
	.couponCenter-r-t{
		height: 100rpx;
	}
	.couponCenter-r-t-l{
		float: left;
	}
	.couponCenter-r-but{
		float: right;
		border-radius: 30rpx;
		font-size: 30rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-top: 80rpx;
		margin-left: 20rpx;
	}
	.couponCenter-r-b{
		margin-top: 50rpx;
		
	}
	.couponCenter-r-tview{
		margin-top:20rpx ;
	}

</style>
